<template>
  <div class="app-container">
    <!--查询条件开始-->
    <el-form
      ref="queryForm"
      :inline="true"
      :model="queryParams"
      label-width="68px"
    >
      <el-form-item label="学生姓名" prop="stuName">
        <el-input
          v-model="queryParams.stuName"
          clearable
          placeholder="请输入学生姓名"
          size="small"
          style="width: 180px"
        />
      </el-form-item>

      <el-form-item label="所属班级" prop="interviewTeacher">
        <el-select
          v-model="queryParams.stuClassId"
          placeholder="所属班级"
          clearable
          size="small"
          style="width: 180px"
        >
          <el-option
            v-for="c in classs"
            :key="c.classId"
            :label="c.className"
            :value="c.classId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="在校状态" prop="stuState">
        <el-select
          v-model="queryParams.stuState"
          clearable
          placeholder="在校状态"
          size="small"
          style="width: 150px"
        >
          <el-option
            v-for="dict in stuStatusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker
          v-model="dateRange"
          end-placeholde="结束日期"
          range-separator="-"
          size="small"
          start-placeholde="开始日期"
          style="width: 220px"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          type="primary"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!--查询条件结束-->

    <!--表头按钮开始-->
    <el-row :gutter="10" style="margin-bottom: 8px">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="single"
          icon="el-icon-edit"
          size="mini"
          type="success"
          @click="handleUpdate"
          >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="multiple"
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete"
          >删除
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          :disabled="single"
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="handlerInterview"
          >访谈记录
        </el-button>
      </el-col>
    </el-row>
    <!--表头按钮结束-->

    <!--表格数据开始-->
    <el-table
      v-loading="loading"
      :data="userTableList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form class="demo-table-expand" inline label-position="left">
            <el-form-item label="报名时间">
              <span>{{
                formatDateNew(props.row.stuRegistrationtime, "{y}-{m}-{d}")
              }}</span>
            </el-form-item>
            <el-form-item label="入学时间">
              <span>{{
                formatDateNew(props.row.createTime, "{y}-{m}-{d}")
              }}</span>
            </el-form-item>
            <el-form-item label="民族">
              <span>{{ props.row.stuNation }}</span>
            </el-form-item>
            <el-form-item label="身份证号码">
              <span>{{ props.row.stuId }}</span>
            </el-form-item>
          </el-form>
          <el-divider>缴费清单</el-divider>
          <vxe-button icon="fa fa-plus" @click="insertEvent(props.row)"
            >新增</vxe-button
          >
          <vxe-button icon="fa fa-save" @click="fullValidEvent(props.row)"
            >保存</vxe-button
          >
          <vxe-table
            border
            show-overflow
            keep-source
            :ref="props.row.id + 'xTable'"
            max-height="400"
            :data="props.row.grade"
            :edit-rules="validRules"
            :edit-config="{
              trigger: 'click',
              mode: 'cell',
              icon: 'fa fa-pencil',
              showStatus: true,
            }"
          >
            <vxe-table-column
              field="payTime"
              title="缴费日期"
              sortable
              :edit-render="{ name: '$input', props: { type: 'date' } }"
            ></vxe-table-column>
            <vxe-table-column
              field="payMoney"
              title="缴费金额(单位:元)"
              sortable
              :edit-render="{ name: 'input', defaultValue: '' }"
            ></vxe-table-column>
            <vxe-table-column
              field="payRecord"
              title="缴费备注"
              sortable
              :edit-render="{ name: 'input', defaultValue: '' }"
            ></vxe-table-column>
            <vxe-table-column
              field="payNum"
              title="缴费次序"
              sortable
              :edit-render="{ name: '$select', options: maxNum }"
            ></vxe-table-column>
            <vxe-table-column
              field="payIsflas"
              title="是否缴费"
              sortable
              :edit-render="{
                name: '$select',
                options: toPayOptions,
                optionProps: { value: 'dictValue', label: 'dictLabel' },
              }"
            ></vxe-table-column>
            <vxe-table-column title="操作" sortable>
              <template #default="{ row }">
                <template>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    type="text"
                    @click="removeEvent(props.row, row)"
                    >删除
                  </el-button>
                </template>
              </template>
            </vxe-table-column>
          </vxe-table>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户姓名" prop="stuName">
        <template slot-scope="scope">
          <el-button type="text" @click="openDialogTable(scope.row)">{{
            scope.row.stuName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        :formatter="sexFormatter"
        align="center"
        label="性别"
        prop="stuSex"
        width="80"
      />
      <el-table-column align="center" label="年龄" prop="stuAge" width="80" />
      <el-table-column align="center" label="手机号码" prop="stuPhone" />
      <el-table-column align="center" label="出生日期" prop="stuBirthday" />
      <el-table-column
        :formatter="stuEducationFormatter"
        align="center"
        label="学生背景"
        prop="stuEducation"
      />
      <el-table-column
        :formatter="classFormatter"
        align="center"
        label="班级"
        prop="stuClassId"
      />
      <el-table-column
        :formatter="stuStatusFormatter"
        align="center"
        label="在读状态"
        prop="stuState"
      />
      <el-table-column
        align="center"
        label="毕业学校"
        prop="stuGraduateschool"
      />
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >

          <el-button
            v-if="scope.row.userId != 1"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            >删除
          </el-button>

          <el-button
            v-if="scope.row.stuState == 1"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handlerGetJobOpen(scope.row)"
            >就业
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--表格数据结束-->

    <!--分页插件开始-->
    <el-pagination
      v-show="total > 0"
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!--分页插件结束-->

    <!--添加修改弹出层开始-->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="open"
      append-to-body
      center
      width="800px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="在读状态" prop="stuState">
              <el-radio-group v-model="form.stuState">
                <el-radio
                  v-for="dict in stuStatusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                  :value="dict.dictValue"
                  >{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="班级" prop="stuClassId">
              <el-select
                v-model="form.stuClassId"
                clearable
                placeholder="班级"
                style="width: 100%"
              >
                <el-option
                  v-for="d in classs"
                  :key="d.classId"
                  :label="d.className"
                  :value="d.classId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="报名日期" prop="stuRegistrationtime">
              <el-date-picker
                v-model="form.stuRegistrationtime"
                placeholder="选择日期"
                style="width: 100%"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="学生姓名" prop="stuName">
              <el-input
                v-model="form.stuName"
                clearable
                placeholder="请输入用户名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="性别" prop="stuSex">
              <el-radio-group v-model="form.stuSex">
                <el-radio
                  v-for="d in sexOptions"
                  :key="d.dictValue"
                  :label="d.dictValue"
                  :value="d.dictValue"
                >
                  {{ d.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="身份证" prop="stuId">
              <el-input
                v-model="form.stuId"
                placeholder="请输入学生身份证号码"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号" prop="stuPhone">
              <el-input
                v-model="form.stuPhone"
                clearable
                placeholder="请输入手机号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="毕业学校" prop="stuGraduateschool">
              <el-input
                v-model="form.stuGraduateschool"
                placeholder="请输入学生毕业学校"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="学历" prop="stuEducation">
              <el-select
                v-model="form.stuEducation"
                clearable
                placeholder="学历"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="d in stuEducationOptions"
                  :key="d.dictValue"
                  :label="d.dictLabel"
                  :value="d.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="民族" prop="stuNation">
              <el-input v-model="form.stuNation" placeholder="请输入学生民族" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="出生日期" prop="stuBirthday">
              <el-date-picker
                v-model="form.stuBirthday"
                placeholder="选择日期"
                style="width: 100%"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="资料上传">
              <!--<el-upload
                class="upload-demo"
                :action="uploadPath"
                :headers="headers"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                name="uploadFile"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :on-success="handleSuccess"
                :on-error="handleError"
              >-->


              <el-upload
                accept=".jpg,.jpeg,.png"
                :action="uploadPath"
                 list-type="picture-card"
                name="uploadFile"
                :headers="headers"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :on-success="handleSuccess"
                :on-error="handleError"
                :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                   <!-- <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>-->
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>

              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>

               <!-- <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <!--添加修改弹出层失败-->
    <!-- 分配角色的弹出层开始 -->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="selectRoleOpen"
      append-to-body
      center
      width="900px"
    >
      <el-table
        ref="roleListTable"
        v-loading="loading"
        :data="roleTableList"
        border
        @selection-change="handleRoleTableSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="角色ID" prop="roleId" />
        <el-table-column align="center" label="角色名称" prop="roleName" />
        <el-table-column align="center" label="权限编码" prop="roleCode" />
        <el-table-column align="center" label="备注" prop="remark" />
        <el-table-column align="center" label="创建时间" prop="createTime" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveRoleUserSubmit"
          >确 定</el-button
        >
        <el-button @click="cancelRoleUser">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 分配角色的弹出层结束 -->

    <!-- 访谈记录的弹出层开始 -->
    <el-dialog
      :title="(titele = '访谈记录')"
      :visible.sync="InterviewOpen"
      append-to-body
      center
      width="900px"
    >
      <el-form ref="form" :model="interviewfrom" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="访谈日期" prop="interviewTime">
              <el-date-picker
                v-model="interviewfrom.interviewTime"
                placeholder="选择日期"
                type="date"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="访谈情况" prop="interviewDesc">
              <el-input
                v-model="interviewfrom.interviewDesc"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="访谈内容" prop="interviewContent">
              <el-input
                v-model="interviewfrom.interviewContent"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleinterviewSubmit"
          >确 定</el-button
        >
        <el-button @click="cancelinterviewUser">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 访谈结束的弹出层开始 -->

    <!-- 访谈记录的弹出层开始 -->
    <el-dialog
      :title="InterviewListTitele"
      :visible.sync="interviewListOpen"
      append-to-body
      center
      width="80%"
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <el-table v-loading="loading" border :data="InterviewList">
        <el-table-column label="访谈学生" align="center" prop="studentName" />
        <el-table-column label="访谈老师" align="center" prop="teacherName" />
        <el-table-column label="访谈情况" align="center" prop="interviewDesc">
          <template slot-scope="scope">
            <el-popover placement="top-start" width="400" trigger="hover">
              <p style="color: #14d36a">{{ scope.row.interviewDesc }}</p>
              <el-button slot="reference" type="text">{{
                scope.row.interviewDesc | ellipsis
              }}</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="访谈内容"
          align="center"
          prop="interviewContent"
        >
          <template slot-scope="scope">
            <el-popover placement="top-start" width="400" trigger="hover">
              <p style="color: #14d36a">{{ scope.row.interviewContent }}</p>
              <el-button slot="reference" type="text">{{
                scope.row.interviewContent | ellipsis
              }}</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="访谈时间" align="center" prop="interviewTime">
          <template slot-scope="scope">
            {{ formatDateNew(scope.row.interviewTime, "{y}-{m}-{d}") }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 访谈结束的弹出层开始 -->

    <!-- 缴费清单的弹出层开始 -->
    <el-dialog
      :title="'缴费清单'"
      :visible.sync="JobOpen"
      append-to-body
      center
      width="900px"
    >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleinterviewSubmit"
          >确 定</el-button
        >
        <el-button @click="cancelinterviewUser">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 缴费清单的弹出层结束 -->

    <!-- 添加就业弹框开始 -->
    <el-dialog
      :title="(titele = '添加就业')"
      :visible.sync="getJobOpen"
      append-to-body
      center
      width="650"
    >
      <el-form
        ref="form"
        :model="studentJob"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="学生姓名" prop="stuName">
              <el-input
                v-model="studentJob.stuName"
                placeholder="请输入用户名称"
                :disabled="true"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="班级" prop="claName">
              <el-input
                v-model="studentJob.claName"
                placeholder="班级名称"
                :disabled="true"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="就业老师" prop="jobId">
              <el-select
                v-model="studentJob.jobId"
                clearable
                placeholder="就业老师"
                size="small"
                style="width: 100%"
                @change="changeJobId"
              >
                <el-option
                  v-for="d in jobTeacherList"
                  :key="d.userId"
                  :label="d.userName"
                  :value="d.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="就业时间" prop="jobTime">
              <el-date-picker
                v-model="studentJob.jobTime"
                placeholder="就业时间"
                style="width: 100%"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="就业岗位" prop="jobPost">
              <el-input v-model="studentJob.jobPost" placeholder="就业岗位" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="就业公司名称" prop="jobCompany">
              <el-input
                v-model="studentJob.jobCompany"
                clearable
                placeholder="就业公司名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="就业薪资" prop="jobSalary">
              <el-input
                type="number"
                v-model="studentJob.jobSalary"
                placeholder="就业薪资"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系电话" prop="iphon">
              <el-input v-model="studentJob.iphon" placeholder="联系电话" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="jobRecord">
              <el-input
                v-model="studentJob.jobRecord"
                placeholder="备注"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer">
        <el-button type="primary" @click="addGetJob">确 定</el-button>
        <el-button @click="clearGetJobOpen">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加就业弹框结束 -->
  </div>
</template>
<script>
import { isValidateMobile, cardid, validatename } from "@/utils/validate";
import { addInterview, getInterviewById } from "@/api/system/Interview";
import { selectAllUser, getUserByRole } from "@/api/system/user";
import { getToken } from '@/utils/auth'
import {
  savePay,
  listStudentForPage,
  addStudent,
  updateStudent,
  deleteStudentByIds,
  getStudentById,
  getClassByUserCampus,
} from "@/api/system/student";
import { addGetJob } from "@/api/system/gitjob";

const baseURL = process.env.VUE_APP_BASE_API
export default {
  data() {


    const validatename = (rule, value, callback) => {
      if (value && !validatename(value)) {
        callback(new Error("姓名格式不正确"));
      }
      callback();
    };
    const validatePhone = (rule, value, callback) => {
      if (value && !isValidateMobile(value)) {
        callback(new Error("电话格式不正确"));
      }
      callback();
    };
    const identityNumValidator = (rule, value, callback) => {
      const result = cardid(value);
      if (value.length > 0) {
        if (result[0]) {
          callback(new Error(result[1]));
        }
      }
      callback();
    };
    return {
      imageUrlPath:baseURL+'/file/down/',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,

      maxNum: [],
      toPayOptions: [],
      validRules: {
        payTime: [{ required: true, message: "缴费日期不允许为空" }],
        payMoney: [{ required: true, message: "缴费金额不允许为空" }],
        payNum: [{ required: true, message: "缴费次序不允许为空" }],
        payIsflas: [{ required: true, message: "是否缴费不允许为空" }],
      },

      JobOpen: false,
      teacherOptions: [],
      InterviewOpen: false,
      //分配角色是否显示
      selectRoleOpen: false,
      //查询所有角色信息
      roleTableList: [],
      //分配角色Id合集
      roleSelectionIds: [],
      //分配角色当前选中的用户
      roleUserId: "",
      //弹出层标题
      title: "",
      //时间
      dateRange: [],

      studentClassOptions: [],

      //在读状态数据值集
      stuStatusOptions: [],
      //性别数据值集
      sexOptions: [],
      //用户任职数据值集
      userRankOptions: [],

      stuEducationOptions: [],

      campusOptions: [],
      //排班状态
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,

        stuName: undefined,
        stuState: undefined,
      },
      //分配角色按钮显示或隐藏
      showRoleButton: true,
      //非多选禁用
      multiple: true,
      //非单选禁用
      single: true,
      //表格数据
      userTableList: [],
      //遮罩
      loading: false,
      //表格数据条数
      classs: [],
      total: 0,
      //选中的集合
      ids: [],
      //添加修改表单
      form: {},
      // 访谈记录
      interviewfrom: {},
      //打开弹出层
      open: false,
      //表单校验
      rules: {
        stuName: [
          { required: true, message: "用户姓名不能为空", trigger: "blur" },
        ],
        stuPhone: [
          { required: true, message: "用户手机号不能为空", trigger: "blur" },
        ],
        stuName: [
          { required: true, message: "学生姓名不能为空", trigger: "blur" },
        ],
        stuPhone: [
          { required: true, message: "用户手机号不能为空", trigger: "blur" },
        ],
        stuState: [
          { required: true, message: "请选择在读状态", trigger: "blur" },
        ],
        stuClassId: [
          { required: true, message: "请选择班级", trigger: "blur" },
        ],
        stuId: [
          { required: true, message: "学生身份证不能为空", trigger: "blur" },
          { validator: identityNumValidator, trigger: "blur" },
        ],
        stuGraduateschool: [
          { required: true, message: "毕业学校不能为空", trigger: "blur" },
        ],
        stuEducation: [
          { required: true, message: "学历不能为空", trigger: "blur" },
        ],
        // stuBirthday:[
        //   { required: true, message: '请选择出生日期', trigger: 'blur' }
        // ]
        interviewTime: [
          { required: true, message: "访谈日期不允许为空", trigger: "blur" },
        ],
        interviewDesc: [
          { required: true, message: "访谈情况不允许为空", trigger: "blur" },
        ],
        interviewContent: [
          { required: true, message: "访谈内容不允许为空", trigger: "blur" },
        ],
        stuName: [
          { required: true, message: "学生姓名不能为空", trigger: "blur" },
        ],
        claName: [
          { required: true, message: "班级名称不能为空", trigger: "blur" },
        ],
        jobTime: [
          { required: true, message: "就业时间不能为空", trigger: "blur" },
        ],
        jobPost: [
          { required: true, message: "就业岗位不能为空", trigger: "blur" },
        ],
        jobCompany: [
          { required: true, message: "入职公司不能为空", trigger: "blur" },
        ],
        jobSalary: [
          { required: true, message: "就业薪资不能为空", trigger: "blur" },
        ],
      },
      // 单个学生访谈记录
      InterviewList: [],
      // 访谈记录弹框
      interviewListOpen: false,
      // 访谈标题
      InterviewListTitele: null,
      // 就业弹框
      getJobOpen: false,
      // 选中的学生
      studentJob: {
        stuId: undefined, // 学生id
        stuName: undefined, // 学生名称
        claId: undefined, // 班级id
        claName: undefined, // 班级名称
        jobId: undefined, // 就业id
        jobTeacherName: undefined, // 就业老师名称
        jobTime: undefined, // 就业时间
        jobPost: undefined, // 就业岗位
        jobCompany: undefined, // 就业公司名称
        jobSalary: undefined, // 就业薪资
        iphon: undefined, // 电话
        jobRecord: undefined, // 备注
      },
      // 就业老师集合
      jobTeacherList: [],

      //文件地址
      uploadPath:undefined,
      fileList:[],
      headers:undefined
    };
  },

  //钩子
  created() {
    this.getDataByKey("GRADE_SCHOOL", "MAXNUM").then((res) => {
      var temp = [];
      for (let index = 0; index < res.data; index++) {
        temp[index] = { label: "第" + (index + 1) + "次", value: index + 1 };
      }
      this.maxNum = temp;
    });
    selectAllUser().then((res) => {
      this.teacherOptions = res.data;
    });

    this.getDataByType("stu_state_type").then((res) => {
      this.stuStatusOptions = res.data;
    });
    this.getDataByType("sys_yes_no").then((res) => {
      this.toPayOptions = res.data;
    });
    this.getDataByType("sys_user_sex").then((res) => {
      this.sexOptions = res.data;
    });

    this.getDataByType("sys_user_background").then((res) => {
      this.stuEducationOptions = res.data;
    });
    //初始化所有班级
    getClassByUserCampus().then((res) => {
      this.classs = res.data;
    });
    this.getlistStudentForPage();
    this.uploadPath = process.env.VUE_APP_BASE_API+`/file/imagesUpload`
    this.headers = {'token':getToken()}
  },
  methods: {
    //移除图片
    handleRemove(file) {
      console.log(file);
      console.log(JSON.stringify(this.fileList))
      this.fileList = this.fileList.filter(item => {
        return item.id !== file.id
      })
    },
    // 放大图片
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.loading = false;
    },
    handleDownload(file) {
      console.log(file);
    },

    // 选择就业老师触发
    changeJobId(jobTeacherId) {
      Object.keys(this.jobTeacherList).map((key) => {
        if (this.jobTeacherList[key].userId == jobTeacherId) {
          this.studentJob.jobTeacherName = this.jobTeacherList[key].userName;
          return false;
        }
      });
    },

    // 打开就业弹框
    handlerGetJobOpen(row) {
      this.studentJob = row;
      // 处理班级名称
      this.studentJob.claName = this.classFormatter(row);
      // 处理班级id
      this.studentJob.claId = row.stuClassId;
      // 处理学生id
      this.studentJob.stuId = row.id;
      // console.log(JSON.stringify(this.studentJob))
      getUserByRole("role:301").then((response) => {
        this.jobTeacherList = response.data;
      });
      this.getJobOpen = true;
    },

    clearGetJobForm() {
      this.studentJob = {
        stuId: undefined, // 学生id
        stuName: undefined, // 学生名称
        claId: undefined, // 班级id
        claName: undefined, // 班级名称
        jobId: undefined, // 就业id
        jobTeacherName: undefined, // 就业老师名称
        jobTime: undefined, // 就业时间
        jobPost: undefined, // 就业岗位
        jobCompany: undefined, // 就业公司名称
        jobSalary: undefined, // 就业薪资
        iphon: undefined, // 电话
        jobRecord: undefined, // 备注
      };
    },

    // 关闭新增就业弹框
    clearGetJobOpen() {
      this.clearGetJobForm();
      this.getJobOpen = false;
    },

    // 添加就业信息
    addGetJob() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addGetJob(this.studentJob).then((reponse) => {
            if (reponse.data) {
              this.msgSuccess("保存成功");
              this.getlistStudentForPage();
              this.clearGetJobOpen();
            }
          });
        }
      });
    },

    // ---------------------------------------------------------------------------------------------

    removeEvent(row0, row) {
      const $table = this.$refs[row0.id + "xTable"];
      $table.remove(row);
    },

    //////////////
    async fullValidEvent(row) {
      const $table = this.$refs[row.id + "xTable"];
      const errMap = await $table.fullValidate().catch((errMap) => errMap);
      if (errMap) {
        const msgList = [];
        Object.values(errMap).forEach((errList) => {
          errList.forEach((params) => {
            const { rowIndex, column, rules } = params;
            rules.forEach((rule) => {
              msgList.push(
                `第 ${rowIndex + 1} 行 ${column.title} 校验错误：${
                  rule.message
                }`
              );
            });
          });
        });
        this.$XModal.message({
          status: "error",
          slots: {
            default() {
              return [
                <div class="red" style="max-height: 400px;overflow: auto;">
                  {msgList.map((msg) => (
                    <div>{msg}</div>
                  ))}
                </div>,
              ];
            },
          },
        });
      } else {
        // const { insertRecords, removeRecords, updateRecords } =
        // console.log();
        savePay(row.id, $table.getTableData().tableData).then((res) => {
          this.msgSuccess("保存成功");
          this.getlistStudentForPage();
        });
        //  console.log(JSON.stringify($table.getData()))
      }
    },


    async insertEvent(row) {
      const $table = this.$refs[row.id + "xTable"];
      const record = {};
      var temp;
      const { temp: newRow } = await $table.insertAt(record, temp);
      await $table.setActiveCell(newRow);
    },

    // saveEvent (row) {

    //   //学生id
    //   console.log(row.id)
    //   const $table = this.$refs[row.id+'xTable']
    //   // const { insertRecords, removeRecords, updateRecords } =
    //   // console.log();
    //   savePay(row.id,$table.getTableData().tableData).then(res => {
    //     console.log(res)
    //    this.msgSuccess("保存成功")
    //    this.getlistStudentForPage()
    //   })
    // //  console.log(JSON.stringify($table.getData()))
    // },

    openDialogTable(row) {
      getInterviewById(row.id).then((res) => {
        this.InterviewList = res.data;
        this.InterviewListTitele = "(" + row.stuName + ")学生访谈记录";
        this.interviewListOpen = true;
      });
    },

    handleJob() {
      this.JobOpen = true;
    },

    handlerInterview() {
      this.InterviewOpen = true;
    },
    getlistStudentForPage() {
      this.loading = true;
      listStudentForPage(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((res) => {
        this.userTableList = res.data;
        this.total = res.total;
        this.loading = false;
      });
    },
    //表格多选框选中事件
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = !(selection.length == 1);
      this.multiple = !(selection.length > 0);
      if (selection.length === 0) {
        this.showRoleButton = true;
      }
      selection.map((item) => {
        if (item.id === 1) {
          this.showRoleButton = false;
        } else {
          this.showRoleButton = true;
        }
      });
    },
    //搜索
    handleQuery() {
      this.getlistStudentForPage();
    },
    //重置
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.dateRange = [];
      this.getlistStudentForPage();
    },
    //新增
    handleAdd() {
      this.title = "添加学生";
      this.reset();
      this.open = true;
    },
    //修改
    handleUpdate(row) {
      this.title = "修改学生";
      this.reset();
      let id = row.id === undefined ? this.ids[0] : row.id;
      getStudentById(id).then((res) => {
        this.form = res.data;
        console.log(JSON.stringify(res.data))
        if (res.data.stuFileId !== "" && res.data.stuFileId !== null){
          let filIds = res.data.stuFileId.split("-")
          filIds.forEach((e,index,error) => {
            this.fileList.push({'url':this.imageUrlPath+e,'id':e})
          })
        }
        this.open = true;
      });
    },
    //删除
    handleDelete(row) {
      let id = row.id === undefined ? this.ids : row.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteStudentByIds(id).then((res) => {
            this.msgSuccess("删除成功");
            this.getlistStudentForPage();
          });
        })
        .catch(() => {
          this.msgInfo("取消删除");
          this.getlistStudentForPage();
        });
    },

    //重置密码
    handleResetPwd() {
      this.$confirm("此操作将不可逆, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetPwd(this.ids).then((res) => {
            this.msgSuccess("重置成功");
            this.getlistStudentForPage();
          });
        })
        .catch(() => {
          this.msgInfo("取消重置");
          this.getlistStudentForPage();
        });
    },
    //添加访谈
    handleinterviewSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //this.$refs['form'].validate((valid) => {})
          this.interviewfrom.studentId = this.ids[0];
          // console.log(this.ids[0])
          addInterview(this.interviewfrom).then((res) => {
            this.msgSuccess("保存成功");
            this.InterviewOpen = false;
            this.interviewfrom = {};
          });
        }
      });
    },

    cancelinterviewUser() {
      this.InterviewOpen = false;
      this.interviewfrom = {};
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getlistStudentForPage();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getlistStudentForPage();
    },
    // //翻译部门
    // deptFormatter(row){
    //    let arr = []
    //    this.deptOptions.map(item => {
    //     if(item.deptId ===row.deptId){
    //       arr.push(item.deptName)
    //     }
    //   })
    //   return arr.join('')
    // },

    //班级翻译
    classFormatter(row) {
      var actions = [];
      Object.keys(this.classs).map((key) => {
        if (this.classs[key].classId == row.stuClassId) {
          actions.push(this.classs[key].className);
          return false;
        }
      });
      return actions.join("");
    },
    //翻译性别
    sexFormatter(row) {
      return this.selectDictLabel(this.sexOptions, row.stuSex);
    },
    // //翻译用户背景
    // backgroundFormatter(row){
    //    return this.selectDictLabel(this.backgroundOptions,row.background)
    // },

    stuAgeFormatter(row) {
      return this.GetAgeById(row.stuId);
    },
    //翻译状态
    stuStatusFormatter(row) {
      return this.selectDictLabel(this.stuStatusOptions, row.stuState);
    },

    stuEducationFormatter(row) {
      return this.selectDictLabel(this.stuEducationOptions, row.stuEducation);
    },
    //提交
    handleSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id === undefined) {
            //添加
            //修改
            const ids = this.fileList.map(m=>m.id);
            this.form.ids=ids;
            addStudent(this.form).then((res) => {
              this.msgSuccess("添加成功");
              this.getlistStudentForPage();
              this.open = false;
            });
          } else {
            //修改
            const ids = this.fileList.map(m=>m.id);
            this.form.ids=ids;
            updateStudent(this.form).then((res) => {
              this.msgSuccess("修改成功");
              this.getlistStudentForPage();
              this.open = false;
            });


          }
        }
      });
    },
    //取消
    cancel() {
      this.fileList = []
      this.open = false;
    },
    // 重置表单
    reset() {
      this.fileList = []
      this.resetForm("form");
      this.form = {
        stuSex: "0",
        stuState: "0",
      };
    },
    //分配角色选中触发事件
    handleRoleTableSelectionChange(selection) {
      this.roleSelectionIds = selection.map((item) => item.roleId);
      // console.log(this.roleSelectionIds)
      // console.log('被选中了')
    },
    //确定分配角色
    handleSaveRoleUserSubmit() {
      // console.log(this.roleSelectionIds)
      saveUserRole(this.roleUserId, this.roleSelectionIds).then((res) => {
        this.msgSuccess("分配成功");
        this.selectRoleOpen = false;
        this.$refs.roleListTable.clearSelection();
      });
    },
    //取消分配角色
    cancelRoleUser() {
      this.$refs.roleListTable.clearSelection();
      this.selectRoleOpen = false;
    },

    //文件上传的相关方法
    //预览回调
    handlePreview(file){

    },

    //移除前回调
    beforeRemove(file, fileList){

    },
    //超出个数勾子
    handleExceed(files, fileList){

    },
    handleSuccess(response, file, fileList){
       console.log(response);
        this.fileList.push(
          {'name':response.data.realName,'url':this.imageUrlPath+response.data.id,'id':response.data.id})
        this.msgSuccess("上传成功")
    },
    handleError(err, file, fileList){

    }
  },
  //监听器
  watch: {
    dateRange: {
      handler(val, oldVal) {
        this.queryParams.pageNum = 1;
        this.getlistStudentForPage();
      },
      deep: true, //深度监视
    },

    "queryParams.stuName": {
      handler(val, oldVal) {
        this.queryParams.pageNum = 1;
        this.getlistStudentForPage();
      },
      deep: true, //深度监视
    },

    "queryParams.stuState": {
      handler(val, oldVal) {
        this.queryParams.pageNum = 1;
        this.getlistStudentForPage();
      },
      deep: true, //深度监视
    },
  },
  filters: {
    // 字符串过长过滤处理
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 15) + "....";
      }
      return value;
    },
  },
};
</script>
<style lang="scss" scoped>
.vxe-select-panel {
  z-index: 9999 !important;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
